<template>
    <div class="auth-container">
      <div class="auth-header">
        <!-- logo展示 -->
        <div class="avatar-btn" >
          <img class="logo" :src="tempAvatarUrl" @click="changeAvatar">
        </div>
        <h1 class="title">欢迎使用湖心游</h1>
        <p class="subtitle">登录后可以收藏景点、定制攻略</p>
      </div>
  
      <div class="auth-buttons">
        <!-- 微信登录按钮 -->
        <button 
          class="auth-btn wechat-btn" 
          @click="handleWechatLogin()"
          :disabled="isLoading"
        >
          <img class="btn-icon" src="/static/wechat-icon.png" alt="微信图标">
          {{ isLoading ? '登录中...' : '微信一键登录' }}
        </button>
      </div>
  
      <div class="auth-footer">
        <span>登录即代表同意</span>
        <router-link to="/agreement" class="link">《用户协议》</router-link>
        <span>和</span>
        <router-link to="/privacy" class="link">《隐私政策》</router-link>
      </div>
    </div>
  </template>

<script>
	import { getOpenidByCodeAPI } from '/api/common.js';
	import {loginByWechat} from '/api/user.js';
	import {onLoad} from '@dcloudio/uni-app'
	import {
		useUserInfoStore
	} from '../../../stores/userInfo.js';
	import {
		mapState,
		mapActions
	} from 'pinia'
	export default {
		data() {
			return {
				tempAvatarUrl: '', 
				tempUsername: '',
				tempPhone: '',
				isLoading:false,
			};
		},
		computed: {
		  ...mapState(useUserInfoStore, ['userId', 'phone', 'username', 'state', 'avatarUrl']),
		},
		created() {
		  // 初始化时将store中的数据赋给临时变量
		  this.tempAvatarUrl = '/static/logo.png'
		  this.tempUsername = '浪子';
		  this.tempPhone = '123';
		},
		methods:{
			...mapActions(useUserInfoStore, ['setUserInfo']),
			changeAvatar() {
			  uni.chooseImage({
			    count: 1,
			    sizeType: ['compressed'],
			    sourceType: ['album', 'camera'],
			    success: (res) => {
			      // 只更新临时头像URL，不立即上传
			      this.tempAvatarUrl = res.tempFilePaths[0];
				  this.tempPhone = '321'
			    },
			  });
			},
			async handleWechatLogin() {
				     try {
				        this.isLoading = true;
				        // 1. 获取微信登录 code
				        const loginRes = await wx.login();
				        const code = loginRes.code;
						    const uploadRes = await uni.uploadFile({
						      url: 'https://yangzhao.mynatapp.cc/api/getOpenId', 
						      filePath: this.tempAvatarUrl,
						      name: 'file',
						      formData: {
						        code: code,
						        nickName: this.tempUsername,
								phone : this.tempPhone
						      },
						    });
				        // 5. 处理后端响应
				        const userData = JSON.parse(uploadRes.data);
						console.log(userData)
				        // 5. 存储用户信息（Pinia）
						if (userData.code === 200) {
						  this.setUserInfo(userData.data.id,userData.data.state,userData.data.userName,userData.data.linkTel,userData.data.imgurl);
						  uni.showToast({
						    title: '登录成功',
						    icon: 'success'
						  });
						  uni.switchTab({
							url: '/common/pages/my/my',
							})
						}else{
							uni.showToast({
							  title: '登录失败，请重试',
							  icon: 'none',
							});
						}
				      } catch (error) {
				        console.error('微信登录失败:', error);
				        uni.showToast({
				          title: '登录失败，请重试',
				          icon: 'none',
				        });
				      } finally {
				        this.isLoading = false;
				      }
				    },
				  },
				};
	
</script>

<style scoped>
.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 10px 30px; /* 上下间距增大到60px */
  background: linear-gradient(to bottom, #9cbdee 0%, #e4e8eb 100%);
}

.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px; /* 增大到60px */
}

.logo {
  width: 100px; /* 稍微增大logo */
  height: 100px;
  margin-bottom: 30px; /* 增大到30px */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px; /* 稍微增大标题 */
  font-weight: bold;
  color: #333;
  margin-bottom: 12px; /* 增大到12px */
}

.subtitle {
  font-size: 16px; /* 稍微增大副标题 */
  color: #666;
}

.auth-buttons {
  width: 100%;
  max-width: 320px; /* 稍微增大最大宽度 */
  margin-bottom: 50px; /* 增大到50px */
}

.auth-btn {
  width: 100%;
  height: 50px; /* 稍微增高按钮 */
  line-height: 50px;
  border-radius: 25px;
  font-size: 16px; /* 稍微增大字体 */
  font-weight: 500;
  margin-bottom: 20px; /* 增大按钮间距 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.3s;
}

.auth-btn:hover {
  opacity: 0.9;
}

.wechat-btn {
  background-color: #9dd6b9;
  color: white;
}

.btn-icon {
  width: 24px; /* 稍微增大图标 */
  height: 24px;
  margin-right: 10px; /* 稍微增大右边距 */
}

.auth-footer {
  display: flex;
  align-items: center;
  font-size: 14px; /* 稍微增大字体 */
  color: #999;
  margin-top: 20px; /* 增加顶部间距 */
}

.link {
  color: #07C160;
  margin: 0 6px; /* 稍微增大左右间距 */
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}
</style>